<template>
	<view class="px-30px pt-30px pb-120px">
		<DateSearch></DateSearch>

		<view class="title text-32px mt-40px flex flex-x-between">
			<text>活动数据统计</text>
			<text>访问量 444 次</text>
		</view>
		<DataCard title='成交统计'>
			<template #titleExtra>
				<view>titleExtra</view>
			</template>
			<template #content>
				<view class="active-data-view px-5px mt-20px flex flex-wrap flex-x-between">
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">成交总计(单)</text>
					</view>
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">成交金额(元)</text>
					</view>
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">佣金金额(元)</text>
					</view>
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">推荐奖金(元)</text>
					</view>
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">硕源奖金(元)</text>
					</view>
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">新生(单)</text>
					</view>
					<view class="w-1-3 py-10px mb-20px flex flex-y flex-x-center flex-y-center bg-white rounded-10px">
						<text class='font-bold text-32px'>53820</text>
						<text class="color-333 text-24px">老生(单)</text>
					</view>
				</view>
			</template>
		</DataCard>

		<view class="title text-32px mt-40px flex flex-x-between">
			<text>团队统计</text>
		</view>
		<view class="p-20px mt-20px bg-white rounded-20px">
			<view>
				<text class="w-40px h-40px p-6px mr-10px rounded border text-center text-24px">01</text>
				<text>地区</text>
			</view>
			<view class="mt-20px flex flex-x-between text-28px leading-40px">
				<view class="w-1-4 text-center">
					<view>成交订单(单)</view>
					<text class="color-blue">156</text>
				</view>
				<view class="w-1-4 text-center">
					<view>新生(单)</view>
					<text class="color-blue">56</text>
				</view>
				<view class="w-1-4 text-center">
					<view>老生(单)</view>
					<text class="color-blue">41</text>
				</view>
				<view class="w-1-4 text-center">
					<view>成交金额(元)</view>
					<text class="color-pink">2331</text>
				</view>
			</view>
		</view>

		<view class="title mt-40px flex flex-x-between">
			<text>员工统计</text>
		</view>
		<DataCard>
			<template #content>
				<view class="text-28px">
					<view class="table-heade leading-100px flex flex-x-between text-28px">
						<text class="w-1-4 text-center">排名</text>
						<text class="w-1-4 text-center">员工</text>
						<text class="w-1-4 text-center">团队</text>
						<text class="w-1-4 text-center">成交订单(单)</text>
					</view>
					<view v-for="(item,index) in state.employeeStatistics" :key="item.id"
						:class="index%2===0?'bg-f1f1f1':''" class="table-body leading-80px flex flex-x-between">
						<text class="w-1-4 text-center">{{index+1}}</text>
						<text class="w-1-4 text-center">{{item.name}}</text>
						<text class="w-1-4 text-center">{{item.team}}</text>
						<text class="w-1-4 text-center">{{item.count}}</text>
					</view>
				</view>
			</template>
		</DataCard>

		<view class="title mt-40px flex flex-x-between">
			<text>新生/老生数据统计</text>
		</view>
		<DataCard title='新生数据统计'>
			<template #titleExtra>
				<view>总计<text class="color-pink font-bold">151</text>单</view>
			</template>
			<template #content>
				<NewOldStu v-model="state.newStu"></NewOldStu>
			</template>
		</DataCard>

		<DataCard title='老生数据统计'>
			<template #titleExtra>
				<view>总计<text class="color-pink font-bold">31</text>单</view>
			</template>
			<template #content>
				<NewOldStu v-model="state.oldStu"></NewOldStu>
			</template>
		</DataCard>
	</view>

	<BackWorkSpace></BackWorkSpace>
</template>

<script setup name="DataStatistics">
	import {
		ref,
		reactive
	} from 'vue';
	import DataCard from '@/components/DataCard.vue'
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import DateSearch from './DateSearch.vue'
	import NewOldStu from './NewOldStu.vue'

	const state = reactive({
		employeeStatistics: [{
				id: 0,
				name: '小吴老师',
				team: '城市之音',
				count: 39
			},
			{
				id: 1,
				name: '孙老师',
				team: '大庆油田',
				count: 139
			},
			{
				id: 2,
				name: '余老师',
				team: '城市之音',
				count: 22
			},
			{
				id: 3,
				name: '赵老师',
				team: '拼多多',
				count: 62
			},
		],
		newStu: [{
				id: 0,
				type: '队长',
				paid: 231,
				unpaid: 39
			},
			{
				id: 1,
				type: '队员',
				paid: 124,
				unpaid: 139
			},
			{
				id: 2,
				type: '队员',
				paid: 66,
				unpaid: 22
			},
			{
				id: 3,
				type: '队长',
				paid: 81,
				unpaid: 62
			},
		],
		oldStu: [{
				id: 0,
				type: '队员',
				paid: 77,
				unpaid: 234
			},
			{
				id: 1,
				type: '队员',
				paid: 93,
				unpaid: 65
			},
			{
				id: 2,
				type: '队长',
				paid: 58,
				unpaid: 20
			},
		]
	})
</script>

<style lang="scss">
	page {
		background: rgb(244, 243, 248);
	}

	.active-data-view {
		&>view {
			position: relative;

			&:nth-of-type(1),
			&:nth-of-type(2),
			&:nth-of-type(4),
			&:nth-of-type(5) {
				&::after {
					content: "";
					position: absolute;
					right: 0;
					width: 2rpx;
					height: 80%;
					background: #dedede;
				}
			}
		}
	}

	.color-pink {
		color: rgb(211, 122, 152);
	}

	.border {
		border: 1px solid #dedede;
	}
</style>